<template>
  <a-modal
    v-model:open="visible"
    :title="modalTitle"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-form ref="formRef"
            :model="formState"
            :rules="formRules"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 18 }">
      <a-form-item label="产品名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入产品名称" />
      </a-form-item>
      <a-form-item label="产品分类" name="category_id">
        <a-select v-model:value="formState.category_id" placeholder="请选择产品分类" :options="categoryOptions"/>
      </a-form-item>
      <a-form-item label="销售价格" name="sale_price">
        <a-input-number v-model:value="formState.sale_price"
                        placeholder="请输入产品价格"
                        class="width-md"
                        :step="0.01"
                        :min="0"/>
      </a-form-item>
      <a-form-item label="进货价格" name="income_price">
        <a-input-number v-model:value="formState.income_price"
                        placeholder="请输入产品价格"
                        class="width-md"
                        :step="0.01"
                        :min="0"/>
      </a-form-item>
      <a-form-item label="供应商" name="supplier_id">
       <a-select placeholder="请选择供应商"></a-select>
      </a-form-item>
      <form-item :label-col="5" :wrapper-col="18" label="状态">
        <a-radio-group v-model:value="formState.status" name="status">
          <a-radio :value="1">上架</a-radio>
          <a-radio :value="0">下架</a-radio>
        </a-radio-group>
      </form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue';
import type { FormInstance } from 'ant-design-vue';
import FormItem from "@/components/FormItem.vue";

interface ProductFormData {
  id?: number;
  name: string;
  category_id: number | undefined;
  sale_price: number;
  income_price?: number;
  status: number;
  supplier_id?: number | undefined;
}

// 表单引用
const formRef = ref<FormInstance>();

// 控制模态框显示隐藏
const visible = defineModel<boolean>('visible', { required: true });

// 产品数据
const productData = defineModel<ProductFormData>('productData');

// 加载状态
const confirmLoading = ref<boolean>(false);

// 表单初始值
const formState = reactive<ProductFormData>({
  id: undefined,
  name: '',
  category_id: undefined,
  sale_price: 0,
  income_price: 0,
  status: 1,
  supplier_id: undefined
});

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '请输入产品名称' }],
  category_id: [{ required: true, message: '请选择产品分类' }],
  sale_price: [{ required: true, message: '请输入产品价格' }]
};

// 分类选项
const categoryOptions = [
  { label: '电子产品', value: 1 },
  { label: '家居用品', value: 2 },
  { label: '服装鞋帽', value: 3 },
  { label: '食品饮料', value: 4 }
];

// 模态框标题（根据是否有id判断是新增还是编辑）
const modalTitle = computed(() => {
  return formState.id ? '编辑产品' : '新增产品';
});

// 监听产品数据变化
watch(productData, (newVal) => {
  if (newVal) {
    Object.assign(formState, newVal);
  } else {
    // 重置表单
    Object.assign(formState, {
      id: undefined,
      name: '',
      category_id: undefined,
      sale_price: 0,
      income_price: 0,
      status: 1,
      supplier_id: undefined
    });
  }
}, { immediate: true });

// 确认按钮
const handleOk = () => {
  formRef.value?.validateFields()
    .then(() => {
      confirmLoading.value = true;
      
      // 模拟保存操作
      setTimeout(() => {
        confirmLoading.value = false;
        visible.value = false;
        
        // 重置表单
        formRef.value?.resetFields();
      }, 1000);
    })
    .catch(() => {
      // 验证失败
    });
};

// 取消按钮
const handleCancel = () => {
  visible.value = false;
  formRef.value?.resetFields();
};
</script>

<style scoped>

</style>